<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：   语法：任意选择器：hover 每个伪类选择器，具备特点
			                 所有元素具备：hover   【常见伪类选择器】 
			*/
		   h1:hover{
			   background: #eebf00;
			   color: #60eeea;
		   }
		   /**
			* 伪类选择器   ：link      链接未点击时状态
			*             ：active    链接被点击时状态
			*             ：visited   链接点击后状态
			*             ：hover     悬停连接时状态
			* 主要结合在一起：针对a元素效果
			*/
		   a:link{ /*未访问状态*/
			   color: #00ff00;
			   /*去掉超链接下划线*/
			   text-decoration: none;
		   }
		   a:active{ /*被点击时状态*/
			   color:#aaaaff;
			   background: #ffff00;
		   }
		   a:visited{ /*点击后状态*/
			   color: #aaaaff;
			   background: #ffaa00;
		   }
		   a:hover{ /**/
			   font-size: 36px;
		   }
		   /**
			* 伪类选择器：input:focus 获取焦点 鼠标点击输入框时效果
			* 针对 输入框 input元素
			*/
		   input:focus{
			   background: #ffff00;
		   }
		   /*伪类选择器：   :first-child   第一个子元素
		                   :last-child    最后一个子元素
						   :nth-child(n)  匹配第n个子元素
			针对：父子级，默认父子级			   
		   */
		  li:first-child{
			  background: #00ff00;
			  color: #00ffff;
		  }
		  li:last-child{
			  font-size: 15px;
		  }
		  li:nth-child(2){
			  background: #ffaa00;
			  font-size: 15px;
		  }
		  li:nth-child(3){
		  	  background: #ffaa00;
		  	  font-size: 15px;
		  }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子级，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>